<template>
    <div class="problem">
        <el-timeline>
            <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp"
                >
                <div class="el-timeline-item-data">
                    <div class="el-timeline-item-text">
                        {{activity.content}}
                    </div>
                    <el-switch
                        v-model="activity.value"
                        active-text="已解决"
                        inactive-text="未解决"
                        @change="handlesolve(activity.value = true)"
                        >
                    </el-switch>
                </div>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
export default {
    name:'Problem',
    data() {
        return {
            Grade:{
                serious:'#F56C6C',   //严重影响性能
                medium:'#E6A23C',   //中度影响性能
                primary:'#909399',  //布局稍许错位
                irrelevance:'#67C23A'   //新的想法
            },
            activities: [
                {
                    id:1,
                    content: 'watch实时监听窗口太卡',
                    timestamp: '2018-04-03 20:46',
                    color: '#F56C6C',
                    value:false,   //true为解决问题,false反之
                }, 
                {
                    id:2,
                    content: '首页ECharts图需要监视div大小，影响性能',
                    timestamp: '2018-04-03 20:46',
                    color: '#F56C6C',
                    value:false,
                }, 
                {
                    id:3,
                    content: '有没有可以代替watch和@media来监视窗口大小的?',
                    timestamp: '2018-04-03 20:46',
                    color: '#67C23A',
                    value:false,
                },
                {
                    id:4,
                    content: '全局加动画',
                    timestamp: '2018-04-03 20:46',
                    color: '#67C23A',
                    value:false,
                }
            ]
        }
    },
    methods: {
        handlesolve(id)
        {
            setTimeout(() => {
                this.activities = this.activities.filter(item => item.value !== true)
            }, 500);
            
        }
    },
}
</script>

<style lang="less" scoped>
    .problem
    {
        padding: 20px 0;
        .el-timeline-item-data
        {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    @media all and (max-width: 1200px)
    {
        .el-timeline-item-text
        {
            width: 50%;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
    }
</style>